<template>
    <template v-if="$props?.config && Object.keys($props?.config).length">
        <a-form :model="formState" layout="vertical">
            <!-- 公共属性 -->
            <a-form-item label="组件类型：">
                <a-select
                    v-model:value="formState.config.component"
                    @change="onHandleTypeChange"
                    style="width: 100%"
                >
                    <a-select-option v-for="item in compTypeOptions" :value="item?.value" :key="item?._other_?.formItemId">
                        <span>
                            <span style="padding-right: 4px;">
                                <template v-if="item?._other_?.isSvg">
                                    <img :src="getSvgURL(item?._other_?.tagIcon)" />
                                </template>
                                <template v-else>
                                    <component :is="item?._other_?.tagIcon"></component>
                                </template>
                            </span>
                            <span>{{ item?.label }}</span>
                        </span>
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="字段名：">
                <a-input v-model:value="formState.config.field" @blur="onHandleChange" />
            </a-form-item>
            <a-form-item label="标题：">
                <a-input v-model:value="formState.config.label" @blur="onHandleChange" />
            </a-form-item>
            <a-form-item v-if="getCompIsShowList()">
                <a-space style="width: 100%; justify-content: space-between;">
                    <label>此字段是否显示在列表：</label>
                    <a-switch v-model:checked="formState.other.isShowList" @change="onHandleChange" />
                </a-space>
            </a-form-item>
            <a-form-item label="控件占比宽度：">
                <a-slider v-model:value="formState.config.colProps.span" :marks="marks" :min="0" :max="24" @afterChange="onHandleChange" />
            </a-form-item>
            <a-form-item label="占位提示：" v-if="isShwoComponent(formState.config.component) && formState.config.component != 'RangePicker'">
                <a-input v-model:value="formState.componentProps.placeholder" @blur="onHandleChange" />
            </a-form-item>
            <a-form-item>
                <a-space style="width: 100%; justify-content: space-between;">
                    <label>是否必填：</label>
                    <a-switch v-model:checked="formState.config.required" @change="onHandleChange" />
                </a-space>
            </a-form-item>
            <a-form-item v-if="formState.config.component != 'WangEditor' && formState.config.component != 'UploadImg' && formState.config.component != 'UploadFile'">
                <a-space style="width: 100%; justify-content: space-between;">
                    <label>是否禁用：</label>
                    <a-switch v-model:checked="formState.componentProps.disabled" @change="onHandleChange" />
                </a-space>
            </a-form-item>
            <a-form-item v-if="isShwoComponent(formState.config.component)">
                <a-space style="width: 100%; justify-content: space-between;">
                    <label>是否允许清空：</label>
                    <a-switch v-model:checked="formState.componentProps.allowClear" @change="onHandleChange" />
                </a-space>
            </a-form-item>

            <!-- Input、InputPassword属性 -->
            <template v-if="formState.config.component == 'Input' || formState.config.component == 'InputPassword'">
                <a-form-item label="默认值：">
                    <a-input v-model:value="formState.config.defaultValue" @blur="onHandleChange" placeholder="请输入默认值" />
                </a-form-item>
                <a-form-item label="前缀：">
                    <a-input v-model:value="formState.componentProps.prefix" @blur="onHandleChange" placeholder="前缀" />
                </a-form-item>
                <a-form-item label="后缀：">
                    <a-input v-model:value="formState.componentProps.suffix" @blur="onHandleChange" placeholder="后缀" />
                </a-form-item>
            </template>
            <!-- InputTextArea属性 -->
            <template v-if="formState.config.component == 'InputTextArea'">
                <a-form-item label="默认值：">
                    <a-input v-model:value="formState.config.defaultValue" @blur="onHandleChange" placeholder="请输入默认值" />
                </a-form-item>
                <a-form-item label="最小行数：">
                    <a-input-number v-model:value="formState.componentProps.autoSize.minRows" :min="0" :precision="0" @change="onHandleChange" style="width: 100%;" placeholder="最小行数" />
                </a-form-item>
                <a-form-item label="最大行数：">
                    <a-input-number v-model:value="formState.componentProps.autoSize.maxRows" :min="0" :precision="0" @change="onHandleChange" style="width: 100%;" placeholder="最大行数" />
                </a-form-item>
            </template>
            <!-- InputNumber属性 -->
            <template v-if="formState.config.component == 'InputNumber'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否显示增减按钮：</label>
                        <a-switch v-model:checked="formState.componentProps.controls" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-input-number 
                        v-model:value="formState.config.defaultValue" 
                        @change="onHandleChange"
                        :precision="formState.componentProps.precision"
                        :min="formState.componentProps.min"
                        :max="formState.componentProps.max"
                        style="width: 100%;"
                        placeholder="请输入默认值"
                    />
                </a-form-item>
                <a-form-item label="小数点精度：">
                    <a-input-number v-model:value="formState.componentProps.precision" :min="0" @change="onHandleChange" style="width: 100%;" placeholder="小数点精度" />
                </a-form-item>
                <a-form-item label="最小值：">
                    <a-input-number v-model:value="formState.componentProps.min" :min="0" @change="onHandleChange" style="width: 100%;" placeholder="最小值" />
                </a-form-item>
                <a-form-item label="最大值：">
                    <a-input-number v-model:value="formState.componentProps.max" :min="0" :precision="formState.componentProps.precision" @change="onHandleChange" style="width: 100%;" placeholder="最大值" />
                </a-form-item>
                <a-form-item label="前缀：">
                    <a-input v-model:value="formState.componentProps.prefix" @blur="onHandleChange" placeholder="前缀" />
                </a-form-item>
            </template>
            <!-- Select属性 -->
            <template v-if="formState.config.component == 'Select'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许搜索：</label>
                        <a-switch v-model:checked="formState.componentProps.showSearch" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <label>选择模式：</label>
                        <a-radio-group v-model:value="formState.componentProps.mode" button-style="solid" @change="onHandleChange">
                            <a-radio-button value="default">默认</a-radio-button>
                            <a-radio-button value="multiple">多选</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
                <template v-if="formState.config.required && formState?.config?.rules && formState?.config?.rules.length">
                    <template v-for="(item, index) in formState?.config?.rules" :key="index">
                        <a-form-item>
                            <template #label>
                                <a-tooltip placement="top">
                                    <template #title>
                                        <div>
                                            <div>选择模式为“多选”时校验类型要为“数组”类型；</div>
                                            <div>选择模式为“默认时”校验类型可用“字符串”或“数字”类型；默认为“数字”类型</div>
                                        </div>
                                    </template>
                                    <span>校验类型：&nbsp;<question-circle-outlined /></span>
                                </a-tooltip>
                                
                            </template>
                            <a-select
                                v-model:value="item.type"
                                @change="onSelRuleChange"
                                style="width: 100%"
                            >
                                <a-select-option value="string">字符串</a-select-option>
                                <a-select-option value="number">数字</a-select-option>
                                <a-select-option value="array">数组</a-select-option>
                            </a-select>
                        </a-form-item>
                    </template>
                </template>
                <a-form-item label="默认值：">
                    <template v-if="formState.config.required && formState.componentProps.mode == 'default' && formState?.config?.rules[0]?.type == 'number'">
                        <a-input-number 
                            v-model:value="formState.config.defaultValue" 
                            @change="onHandleChange"
                            :precision="0"
                            :controls="false"
                            style="width: 100%;"
                            placeholder="请输入默认值"
                        />
                    </template>
                    <template v-if="formState.config.required && formState.componentProps.mode == 'default' && formState?.config?.rules[0]?.type == 'string'">
                        <a-input
                            v-model:value="formState.config.defaultValue" 
                            @change="onHandleChange"
                            style="width: 100%;"
                            placeholder="请输入默认值"
                        />
                    </template>
                    <template v-if="formState.config.required && formState.componentProps.mode == 'multiple' && formState?.config?.rules[0]?.type == 'array'">
                        <a-input
                            v-model:value="formState.config.defaultValue" 
                            @change="onHandleChange"
                            style="width: 100%;"
                            placeholder="请输入默认值，例: [1, 2]"
                        />
                    </template>
                    
                </a-form-item>
                <a-divider orientation="center">选择项</a-divider>
                <div class="sel-add-opt-wrapper">
                    <draggable
                        tag="ul"
                        :list="formState.componentProps.options" 
                        item-key="optId"
                        :animation="340"
                        handle=".draIcon"
                        @end="onSelectOptDragEnd"
                    >
                        <template #item="{ element }">
                            <li class="opt_item">
                                <a-input-group compact style="width: 100%;">
                                    <div class="draIcon" title="点击按住鼠标键进行上下拖拽排序"><drag-outlined /></div>
                                    <a-input v-model:value="element.label" @blur="onHandleChange" placeholder="选项名" style="width: 79%" />
                                    <template v-if="formState.componentProps.mode == 'default' && formState?.config?.rules[0]?.type == 'number'">
                                        <a-input-number v-model:value="element.value" @blur="onHandleChange" :precision="0" :controls="false" placeholder="选项值" style="width: 40%" />
                                    </template>
                                    <template v-else>
                                        <a-input v-model:value="element.value" @blur="onHandleChange" placeholder="选项值" style="width: 40%" />
                                    </template>
                                    <a-tooltip title="删除">
                                        <a-button type="link" danger @click="onDelSelectOption(element)">
                                            <template #icon><minus-circle-outlined /></template>
                                        </a-button>
                                    </a-tooltip>
                                </a-input-group>
                            </li>
                        </template>
                    </draggable>
                    <div class="add-action">
                        <a-button type="link" @click="onAddSelectOption">
                            <template #icon><plus-circle-outlined /></template>
                            添加选项
                        </a-button>
                    </div>
                </div>
            </template>
            <!-- Cascader属性 -->
            <template v-if="formState.config.component == 'Cascader'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>校验类型：</label>
                        <a-radio-group v-model:value="formState.other.ruleType" button-style="solid" @change="onCasRuleChange">
                            <a-radio-button value="number">数字</a-radio-button>
                            <a-radio-button value="string">字符串</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>设置选项：</label>
                        <a-button type="primary" @click="onSetCasOption">
                            <template #icon><setting-outlined /></template>
                            设置选项数据
                        </a-button>
                    </a-space>
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-cascader
                        v-model:value="formState.config.defaultValue"
                        :options="formState.componentProps.options"
                        :multiple="formState.componentProps.multiple"
                        @change="onHandleChange"
                        changeOnSelect 
                        placeholder="请选择默认值"
                    />
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许只选中父级选项：</label>
                        <a-switch v-model:checked="formState.componentProps.changeOnSelect" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否开启多选模式：</label>
                        <a-switch v-model:checked="formState.componentProps.multiple" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许搜索：</label>
                        <a-switch v-model:checked="formState.other.ifShowSearch" @change="onCasSearchChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>展开下级菜单方式：</label>
                        <a-radio-group v-model:value="formState.componentProps.expandTrigger" button-style="solid" @change="onHandleChange">
                            <a-radio-button value="hover">鼠标移入</a-radio-button>
                            <a-radio-button value="click">鼠标点击</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
            </template>
            <!-- TreeSelect属性 -->
            <template v-if="formState.config.component == 'TreeSelect'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>校验类型：</label>
                        <a-radio-group v-model:value="formState.other.ruleType" button-style="solid" @change="onTreeRuleChange">
                            <a-radio-button value="number">数字</a-radio-button>
                            <a-radio-button value="string">字符串</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>设置选项：</label>
                        <a-button type="primary" @click="onSetTreeSelect">
                            <template #icon><setting-outlined /></template>
                            设置选项数据
                        </a-button>
                    </a-space>
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-tree-select
                        v-model:value="formState.config.defaultValue"
                        v-model:searchValue="formState.config.searchValue"
                        :treeData="formState.componentProps.treeData"   
                        :multiple="formState.componentProps.multiple"
                        :treeNodeFilterProp="formState.componentProps.treeNodeFilterProp"
                        :treeCheckable="formState.componentProps.treeCheckable"
                        :showSearch="formState.componentProps.showSearch"
                        :treeLine="formState.componentProps.treeLine"
                        :treeCheckStrictly="formState.componentProps.treeCheckStrictly"
                        :treeDefaultExpandAll="formState.componentProps.treeDefaultExpandAll"
                        :dropdownMatchSelectWidth="formState.componentProps.dropdownMatchSelectWidth"
                        allowClear
                        @change="onHandleChange"
                        placeholder="请选择默认值"
                    />
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否开启多选模式：</label>
                        <a-switch v-model:checked="formState.componentProps.multiple" @change="onTreeMultipChange" />
                    </a-space>
                </a-form-item>
                <a-form-item v-if="formState.componentProps.multiple">
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否展示多选框：</label>
                        <a-switch v-model:checked="formState.componentProps.treeCheckable" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item v-if="formState.componentProps.multiple">
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否父子节点选中不关联：</label>
                        <a-switch v-model:checked="formState.componentProps.treeCheckStrictly" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item v-if="!formState.componentProps.treeCheckable">
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许搜索：</label>
                        <a-switch v-model:checked="formState.componentProps.showSearch" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>下拉菜单和选择器同宽：</label>
                        <a-switch v-model:checked="formState.componentProps.dropdownMatchSelectWidth" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否展示线条样式：</label>
                        <a-switch v-model:checked="formState.componentProps.treeLine" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
            </template>
            <!-- RadioGroup属性 -->
            <template v-if="formState.config.component == 'RadioGroup'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>校验类型：</label>
                        <a-radio-group v-model:value="formState.other.ruleType" button-style="solid" @change="onRadioRuleChange">
                            <a-radio-button value="number">数字</a-radio-button>
                            <a-radio-button value="string">字符串</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
                <a-form-item label="默认值：">
                    <template v-if="formState.other.ruleType == 'number'">
                        <a-input-number 
                            v-model:value="formState.config.defaultValue" 
                            @change="onHandleChange"
                            :precision="0"
                            :controls="false"
                            style="width: 100%;"
                            placeholder="请输入默认值"
                        />
                    </template>
                    <template v-else>
                        <a-input
                            v-model:value="formState.config.defaultValue" 
                            @change="onHandleChange"
                            style="width: 100%;"
                            placeholder="请输入默认值"
                        />
                    </template>
                </a-form-item>
                <a-divider orientation="center">选择项</a-divider>
                <div class="sel-add-opt-wrapper">
                    <draggable
                        tag="ul"
                        :list="formState.componentProps.options" 
                        item-key="optId"
                        :animation="340"
                        handle=".draIcon"
                        @end="onSelectOptDragEnd"
                    >
                        <template #item="{ element }">
                            <li class="opt_item">
                                <a-input-group compact style="width: 100%;">
                                    <div class="draIcon" title="点击按住鼠标键进行上下拖拽排序"><drag-outlined /></div>
                                    <a-input v-model:value="element.label" @blur="onHandleChange" placeholder="选项名" style="width: 79%" />
                                    <template v-if="formState.componentProps.mode == 'default' && formState?.config?.rules[0]?.type == 'number'">
                                        <a-input-number v-model:value="element.value" @blur="onHandleChange" :precision="0" :controls="false" placeholder="选项值" style="width: 40%" />
                                    </template>
                                    <template v-else>
                                        <a-input v-model:value="element.value" @blur="onHandleChange" placeholder="选项值" style="width: 40%" />
                                    </template>
                                    <a-tooltip title="删除">
                                        <a-button type="link" danger @click="onDelSelectOption(element)">
                                            <template #icon><minus-circle-outlined /></template>
                                        </a-button>
                                    </a-tooltip>
                                </a-input-group>
                            </li>
                        </template>
                    </draggable>
                    <div class="add-action">
                        <a-button type="link" @click="onAddSelectOption">
                            <template #icon><plus-circle-outlined /></template>
                            添加选项
                        </a-button>
                    </div>
                </div>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>选项类型：</label>
                        <a-radio-group v-model:value="formState.componentProps.optionType" button-style="solid" @change="onHandleChange">
                            <a-radio-button value="default">默认</a-radio-button>
                            <a-radio-button value="button">按钮</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
                <a-form-item v-if="formState.componentProps.optionType == 'button'">
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>选项按钮风格：</label>
                        <a-radio-group v-model:value="formState.componentProps.buttonStyle" button-style="solid" @change="onHandleChange">
                            <a-radio-button value="outline">outline</a-radio-button>
                            <a-radio-button value="solid">solid</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
            </template>
            <!-- CheckboxGroup属性 -->
            <template v-if="formState.config.component == 'CheckboxGroup'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>选项值类型：</label>
                        <a-radio-group v-model:value="formState.other.ruleType" button-style="solid" @change="onCheckboxRuleChange">
                            <a-radio-button value="number">数字</a-radio-button>
                            <a-radio-button value="string">字符串</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
                <a-form-item label="默认值：">
                    <template v-if="formState.other.ruleType == 'number'">
                        <a-Select
                            v-model:value="formState.config.defaultValue" 
                            :options="formState.componentProps.options"
                            @change="onHandleChange"
                            :maxTagCount="3"
                            mode="multiple"
                            allowClear
                            style="width: 100%;"
                            placeholder="请选择默认值"
                        />
                    </template>
                </a-form-item>
                <a-divider orientation="center">选择项</a-divider>
                <div class="sel-add-opt-wrapper">
                    <draggable
                        tag="ul"
                        :list="formState.componentProps.options" 
                        item-key="optId"
                        :animation="340"
                        handle=".draIcon"
                        @end="onSelectOptDragEnd"
                    >
                        <template #item="{ element }">
                            <li class="opt_item">
                                <a-input-group compact style="width: 100%;">
                                    <div class="draIcon" title="点击按住鼠标键进行上下拖拽排序"><drag-outlined /></div>
                                    <a-input v-model:value="element.label" @blur="onHandleChange" placeholder="选项名" style="width: 79%" />
                                    <template v-if="formState.componentProps.mode == 'default' && formState?.config?.rules[0]?.type == 'number'">
                                        <a-input-number v-model:value="element.value" @blur="onHandleChange" :precision="0" :controls="false" placeholder="选项值" style="width: 40%" />
                                    </template>
                                    <template v-else>
                                        <a-input v-model:value="element.value" @blur="onHandleChange" placeholder="选项值" style="width: 40%" />
                                    </template>
                                    <a-tooltip title="删除">
                                        <a-button type="link" danger @click="onDelSelectOption(element)">
                                            <template #icon><minus-circle-outlined /></template>
                                        </a-button>
                                    </a-tooltip>
                                </a-input-group>
                            </li>
                        </template>
                    </draggable>
                    <div class="add-action">
                        <a-button type="link" @click="onAddSelectOption">
                            <template #icon><plus-circle-outlined /></template>
                            添加选项
                        </a-button>
                    </div>
                </div>
            </template>
            <!-- Switch属性 -->
            <template v-if="formState.config.component == 'Switch'">
                <a-form-item label="选中时的内容：">
                    <a-input v-model:value="formState.componentProps.checkedChildren" @blur="onHandleChange" placeholder="请输入选中时的内容" />
                </a-form-item>
                <a-form-item label="非选中时的内容：">
                    <a-input v-model:value="formState.componentProps.unCheckedChildren" @blur="onHandleChange" placeholder="请输入非选中时的内容" />
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>控件尺寸：</label>
                        <a-radio-group v-model:value="formState.componentProps.size" button-style="solid" @change="onHandleChange">
                            <a-radio-button value="default">默认</a-radio-button>
                            <a-radio-button value="small">较小</a-radio-button>
                        </a-radio-group>
                    </a-space>
                </a-form-item>
            </template>
            <!-- Slider属性 -->
            <template v-if="formState.config.component == 'Slider'">
                <a-form-item label="默认值：">
                    <a-input-number 
                        v-model:value="formState.config.defaultValue" 
                        :step="formState.componentProps.step"
                        :min="formState.componentProps.min"
                        :max="formState.componentProps.max"
                        :precision="0"
                        @change="onHandleChange"
                        style="width: 100%;"
                        placeholder="请输入默认值"
                    />
                </a-form-item>
                <a-form-item label="最小值：">
                    <a-input-number 
                        v-model:value="formState.componentProps.min"
                        :step="formState.componentProps.step"
                        :min="0"
                        :precision="0"
                        @change="onHandleChange"
                        style="width: 100%;"
                        placeholder="请输入最小值"
                    />
                </a-form-item>
                <a-form-item label="最大值：">
                    <a-input-number 
                        v-model:value="formState.componentProps.max"
                        :step="formState.componentProps.step"
                        :min="0"
                        :precision="0"
                        @change="onHandleChange"
                        style="width: 100%;"
                        placeholder="请输入最大值"
                    />
                </a-form-item>
                <a-form-item label="步长：">
                    <a-input-number 
                        v-model:value="formState.componentProps.step"
                        :min="1"
                        :precision="0"
                        @change="onHandleChange"
                        style="width: 100%;"
                        placeholder="请输入步长"
                    />
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>反转：</label>
                        <a-switch v-model:checked="formState.componentProps.reverse" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
            </template>
            <!-- Rate属性 -->
            <template v-if="formState.config.component == 'Rate'">
                <a-form-item label="评分总数：">
                    <a-input-number 
                        v-model:value="formState.componentProps.count"
                        :precision="formState.componentProps.allowHalf ? 0.1 : 0"
                        :min="5"
                        @change="onHandleChange"
                        style="width: 100%;"
                        placeholder="请输入评分总数（默认为：5）"
                    />
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-input-number 
                        v-model:value="formState.config.defaultValue"
                        :min="0"
                        :max="formState.componentProps.max"
                        :precision="0"
                        @change="onHandleChange"
                        style="width: 100%;"
                        placeholder="请输入默认值"
                    />
                </a-form-item>
                <a-form-item label="自定义字符：">
                    <a-input v-model:value="formState.componentProps.character" @blur="onHandleChange" allowClear placeholder="请输入自定义字符" />
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许半选：</label>
                        <a-switch v-model:checked="formState.componentProps.allowHalf" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许再次点击后清除：</label>
                        <a-switch v-model:checked="formState.componentProps.allowClear" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
            </template>

            <!-- TimePicker属性 -->
            <template v-if="formState.config.component == 'TimePicker'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>12 小时制：</label>
                        <a-switch v-model:checked="formState.componentProps.use12Hours" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item label="时间格式：">
                    <a-select
                        v-model:value="formState.other.format"
                        @change="onTimeFormatChange"
                        style="width: 100%"
                    >
                        <a-select-option value="HH:mm:ss">HH:mm:ss</a-select-option>
                        <a-select-option value="HH:mm">HH:mm</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-time-picker 
                        v-model:value="formState.config.defaultValue"
                        :use12Hours="formState.componentProps.use12Hours"
                        :format="formState.other.format"
                        :valueFormat="formState.other.format"
                        @change="onHandleChange"
                        placeholder="请选择默认时间"
                        style="width: 100%;"
                        allowClear
                    />
                </a-form-item>
            </template>
            <!-- DatePicker属性 -->
            <template v-if="formState.config.component == 'DatePicker'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否展示时间：</label>
                        <a-switch v-model:checked="formState.componentProps.showTime" @change="onDateShowTimeChange" />
                    </a-space>
                </a-form-item>
                <a-form-item label="时间格式：">
                    <a-select
                        v-model:value="formState.other.format"
                        @change="onTimeFormatChange"
                        style="width: 100%"
                    >
                        <a-select-option v-if="!formState.componentProps.showTime" value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
                        <template v-else>
                            <a-select-option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</a-select-option>
                            <a-select-option value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</a-select-option>
                        </template>
                    </a-select>
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-date-picker 
                        v-model:value="formState.config.defaultValue"
                        :showTime="formState.componentProps.showTime"
                        :format="formState.other.format"
                        :valueFormat="formState.other.format"
                        @change="onHandleChange"
                        placeholder="请选择默认日期"
                        style="width: 100%;"
                        allowClear
                    />
                </a-form-item>
            </template>
            <!-- MonthPicker属性 -->
            <template v-if="formState.config.component == 'MonthPicker'">
                <a-form-item label="默认值：">
                    <a-month-picker 
                        v-model:value="formState.config.defaultValue"
                        :format="formState.componentProps.format"
                        :valueFormat="formState.componentProps.valueFormat"
                        @change="onHandleChange"
                        placeholder="请选择默认月份"
                        style="width: 100%;"
                        allowClear
                    />
                </a-form-item>
            </template>
            <!-- RangePicker属性 -->
            <template v-if="formState.config.component == 'RangePicker'">
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否展示时间：</label>
                        <a-switch v-model:checked="formState.componentProps.showTime" @change="onDateShowTimeChange" />
                    </a-space>
                </a-form-item>
                <a-form-item label="时间格式：">
                    <a-select
                        v-model:value="formState.other.format"
                        @change="onTimeFormatChange"
                        style="width: 100%"
                    >
                        <a-select-option v-if="!formState.componentProps.showTime" value="YYYY-MM-DD">YYYY-MM-DD</a-select-option>
                        <template v-else>
                            <a-select-option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</a-select-option>
                            <a-select-option value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</a-select-option>
                        </template>
                    </a-select>
                </a-form-item>
                <a-form-item label="默认值：">
                    <a-range-picker 
                        v-model:value="formState.config.defaultValue"
                        :format="formState.componentProps.format"
                        :valueFormat="formState.componentProps.valueFormat"
                        :showTime="formState.componentProps.showTime"
                        :ranges="(defaultRanges() as any)"
                        @change="onHandleChange"
                        :placeholder="['默认开始时间', '默认结束时间']"
                        style="width: 100%;"
                        allowClear
                    />
                </a-form-item>
            </template>
            <!-- WangEditor属性 -->
            <template v-if="formState.config.component == 'WangEditor'">
                <a-form-item label="富文本内容高度：">
                    <a-input-number 
                        v-model:value="formState.componentProps.height" 
                        @change="onHandleChange"
                        :precision="0"
                        :min="350"
                        style="width: 100%;"
                    />
                </a-form-item>
            </template>
            <!-- UploadImg、UploadFile属性 -->
            <template v-if="formState.config.component == 'UploadImg' || formState.config.component == 'UploadFile'">
                <a-form-item label="最大上传数量：">
                    <a-input-number 
                        v-model:value="formState.componentProps.maxCount" 
                        @change="onHandleChange"
                        :precision="0"
                        :min="1"
                        :max="20"
                        style="width: 100%;"
                    />
                </a-form-item>
            </template>
            <!-- UploadFile属性 -->
            <template v-if="formState.config.component == 'UploadFile'">
                <a-form-item label="按钮名称：">
                    <a-input v-model:value="formState.componentProps.btnText" @blur="onHandleChange" />
                </a-form-item>
                <!-- <a-form-item label="限制文件大小：（为0时默认按系统限制）">
                    <a-input-number 
                        v-model:value="formState.componentProps.limitSize" 
                        @change="onHandleChange"
                        :precision="0"
                        :min="0"
                        :max="100"
                        style="width: 100%;"
                    />
                </a-form-item> -->
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否显示删除按钮：</label>
                        <a-switch v-model:checked="formState.componentProps.delButton" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
                <a-form-item>
                    <a-space style="width: 100%; justify-content: space-between;">
                        <label>是否允许点击文件名称：</label>
                        <a-switch v-model:checked="formState.componentProps.isClick" @change="onHandleChange" />
                    </a-space>
                </a-form-item>
            </template>

            <!-- 设置联级选择项 -->
            <setup-cascader-opt ref="setCasOptRef" @update="onUpdateCasOption"/>
            <!-- 设置树选择项 -->
            <setup-tree-data ref="setTreeRef" @update="onUpdateTreeData"/>
        </a-form>
    </template>
    <template v-else>
        <div style="margin-top: 150px">
            <a-empty description="暂无设置属性" />
        </div>
    </template>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { QuestionCircleOutlined, PlusCircleOutlined, DragOutlined, MinusCircleOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { baseComponents, chooseComponents, cascaderFilter, defaultRanges } from '../../componentMap';
import { deepClone, debounce } from '@/utils';

import draggable from 'vuedraggable';

const SetupCascaderOpt = defineAsyncComponent(() => import('./components/SetupCascaderOpt/index.vue'));
const SetupTreeData = defineAsyncComponent(() => import('./components/SetupTreeData/index.vue'));

export default defineComponent({
    name: 'FormPanel',
    components: {
        QuestionCircleOutlined,
        PlusCircleOutlined,
        DragOutlined,
        MinusCircleOutlined,
        SettingOutlined,
        draggable,
        SetupCascaderOpt,
        SetupTreeData,
    },
    props: {
        config: {
            type: Object as PropType<Recordable>,
            default: () => ({}),
        },
    },
    emits: ['change'],
    setup(props, { emit }){

        const activeData = reactive<Recordable>({});

        const formState = reactive<Record<string, any>>({});

        const compTypeOptions = computed(() => {
            const newComponents:Recordable[] = (baseComponents as Recordable[]).concat(chooseComponents);
            return newComponents.map((item:any) => {
                return {
                    label: item?._config_?.label,
                    value: item?._config_?.component,
                    ...item,
                };
            });
        });

        const marks = ref<Record<number, any>>({
            8: '8',
            12: '12',
            24: '24',
        });

        // 处理图片地址
        const getSvgURL = (svgName: string) => {
            return new URL(`../../../../../assets/svg/${svgName}.svg`, import.meta.url).href;
        };

        const getCompIsShowList = () => {
            const isShwoList = ['Select', 'TreeSelect', 'WangEditor', 'UploadFile'];
            return !isShwoList.includes(formState.config.component);
        };

        const isShwoComponent = (component:string) => {
            const isShwoComponentList = ['RadioGroup', 'CheckboxGroup', 'Switch', 'Slider', 'Rate', 'WangEditor', 'UploadImg', 'UploadFile'];
            return !isShwoComponentList.includes(component);
        };

        const createIdAndKey = (record: Recordable) => {
            record._config_.field = 'field_'+Math.floor(Math.random() * 1000);
            record.formId = 'field_'+Math.floor(Math.random() * 1000)+'_'+record?.formItemId;
        };

        const onHandleTypeChange = (value:any) => {
            const option = unref(compTypeOptions).find((item:any) => item?.value == value);
            Object.assign(option, { ...option?._other_ });
            createIdAndKey(option);
            Object.assign(activeData, {
                formId: option?.formId,
                formItemId: option?.formItemId,
                isSvg: option?.isSvg,
                name: option?.label,
                tagIcon: option?.tagIcon,
                _config_: option?._config_,
                _props_: option?._props_,
                _other_: option?._other_,
                _slot_: option?._slot_,
            });
            emit('change', activeData);
        };

        // 下拉选择添加选项事件
        const onAddSelectOption = () => {
            const options = formState?.componentProps?.options;
            options.push({ label: undefined, value: (options.length ? (options.length + 1) : 0), optId: 'opt-'+Math.floor(Math.random() * 100000) });
            onHandleChange();
        };
        // 下拉选择删除选项事件
        const onDelSelectOption = (record:Recordable) => {
            const options = formState?.componentProps?.options;
            options.forEach((item: any, idx: number) => {
                if(record?.optId == item?.optId){
                    options.splice(idx, 1);
                }
            });
            onHandleChange();
        };

        // 拖拽下拉选择项结束事件
        const onSelectOptDragEnd = () => {
            onHandleChange();
        };
        //下拉选择设置校验类型触发事件
        const onSelRuleChange = (value: string) => {
            const options = formState?.componentProps?.options;
            if(value == 'string'){
                options.forEach((item:any) => {
                    item.value = item?.value?.toString();
                });
            }else if(value == 'number'){
                options.forEach((item:any) => {
                    item.value = Number(item?.value);
                });
            }

            onHandleChange();
        }; 

        // 处理联级选择项功能
        const setCasOptRef = ref<Nullable<any>>();

        // 点击设置联级选择项数据按钮触发事件
        const onSetCasOption = () => {
            const options = formState?.componentProps?.options;
            unref(setCasOptRef)?.open(options, formState.other.ruleType);
        };
        
        // 更新联级选择项事件
        const onUpdateCasOption = (options: Recordable[]) => {
            formState.componentProps.options = options;
            onHandleChange();
        };

        // 选择校验类型触发事件
        const onCasRuleChange = (e: any) => {
            Modal.confirm({
                title: '提示：修改校验类型会将选项的值重置，并且需重新设置，你确定修改校验类型吗？',
                cancelText: '取消',
                onOk: () => {
                    const value = e?.target?.value;
                    const rules = formState?.config?.rules || [];
                    rules.forEach((item: Recordable) => {
                        item.type = value;
                    });

                    const options = formState?.componentProps?.options;

                    options.forEach((item:any) => recurrence(item));
                    function recurrence (record: Recordable) {
                        record.value = undefined;
                        if(record?.children && record?.children.length > 0){
                            record.children.forEach((item:any) => {
                                recurrence(item);
                            });
                        }
                    }

                    unref(setCasOptRef)?.open(options, formState.other.ruleType);
                    
                    onHandleChange();
                },
                onCancel: () => {
                    formState.other.ruleType = formState.other.ruleType == 'number' ? 'string' : 'number';
                },
            });
        };

        // 是否允许搜索
        const onCasSearchChange = (checked: boolean) => {
            formState.componentProps.showSearch = checked ? { filter: cascaderFilter } : checked;
            onHandleChange();
        };

        // 处理树选择功能
        const setTreeRef = ref<Nullable<any>>();

        // 点击设置树选择项数据按钮触发事件
        const onSetTreeSelect = () => {
            const treeData = formState?.componentProps?.treeData;
            unref(setTreeRef)?.open(treeData, formState.other.ruleType);
        };
        
        // 选择校验类型触发事件
        const onTreeRuleChange = (e: Recordable) => {
            Modal.confirm({
                title: '提示：修改校验类型会将选项的值重置，并且需重新设置，你确定修改校验类型吗？',
                cancelText: '取消',
                onOk: () => {
                    const value = e?.target?.value;
                    const treeData = formState?.componentProps?.treeData;

                    treeData.forEach((item:any) => recurrence(item));
                    function recurrence (record: Recordable) {
                        record.value = value == 'number' ? Number(record?.value) : record.value.toString();
                        if(record?.children && record?.children.length > 0){
                            record.children.forEach((item:any) => {
                                recurrence(item);
                            });
                        }
                    }

                    unref(setTreeRef)?.open(treeData, formState.other.ruleType);
                    
                    onHandleChange();
                },
                onCancel: () => {
                    formState.other.ruleType = formState.other.ruleType == 'number' ? 'string' : 'number';
                },
            });
        };

        // 是否开启多选触发事件
        const onTreeMultipChange = () => {
            const isMultiple = formState.componentProps.multiple;
            if(isMultiple){
                const rules = formState?.config?.rules || [];
                rules.forEach((item: Recordable) => {
                    item.type = 'array';
                });
            }else{
                const rules = formState?.config?.rules || [];
                rules.forEach((item: Recordable) => {
                    item.type = formState.other.ruleType;
                });
            }
        };

        // 更新树选择数据事件
        const onUpdateTreeData = (dataSoucre: Recordable[]) => {
            formState.componentProps.treeData = dataSoucre;
            onHandleChange();
        };

        // 单选框校验类型触发事件
        const onRadioRuleChange = (e: Recordable) => {
            Modal.confirm({
                title: '提示：修改校验类型时在转换选择项值类型可能会出错，错误参数需手动更改选项值，你确定修改校验类型吗？',
                cancelText: '取消',
                onOk: () => {
                    const value = e?.target?.value;
                    const rules = formState?.config?.rules || [];
                    rules.forEach((item: Recordable) => {
                        item.type = value;
                    });

                    const options = formState?.componentProps?.options;

                    options.forEach((item:any) => {
                        item.value = value == 'number' ? Number(item.value) : item.value.toString();
                    });
                    
                    onHandleChange();
                },
                onCancel: () => {
                    formState.other.ruleType = formState.other.ruleType == 'number' ? 'string' : 'number';
                },
            });
        };

        // 多选框校验类型触发事件
        const onCheckboxRuleChange = (e: Recordable) => {
            Modal.confirm({
                title: '提示：修改选择项值类型转换类型时可能会出错，错误参数需手动更改选项值，你确定修改校验类型吗？',
                cancelText: '取消',
                onOk: () => {
                    const value = e?.target?.value;

                    const options = formState?.componentProps?.options;

                    options.forEach((item:any) => {
                        item.value = value == 'number' ? Number(item.value) : item.value.toString();
                    });
                    
                    onHandleChange();
                },
                onCancel: () => {
                    formState.other.ruleType = formState.other.ruleType == 'number' ? 'string' : 'number';
                },
            });
        };

        // 时间选择格式触发事件
        const onTimeFormatChange = () => {
            formState.componentProps.format = formState.other.format;
            formState.componentProps.valueFormat = formState.other.format;
            onHandleChange();
        };

        // 日期选择是否展示时间触发事件
        const onDateShowTimeChange = () => {
            if(formState.componentProps.showTime){
                formState.componentProps.format = 'YYYY-MM-DD HH:mm:ss';
                formState.componentProps.valueFormat = 'YYYY-MM-DD HH:mm:ss';
                formState.other.format = 'YYYY-MM-DD HH:mm:ss';
            }else{
                formState.componentProps.format = 'YYYY-MM-DD';
                formState.componentProps.valueFormat = 'YYYY-MM-DD';
                formState.other.format = 'YYYY-MM-DD';
            }
            onHandleChange();
        };

        // 处理设置属性触发事件
        const onHandleChange = () => {
            if(!formState?.config?.field){
                Modal.error({ title: '字段名不允许为空！' });
                formState.config.field = activeData?._config_?.field;
                return;
            }

            // 下拉框处理
            if(formState.config.component == 'Select'){
                if(formState.componentProps.mode == 'default'){
                    formState.config.rules.forEach((item:any) => {
                        if(item.type == 'array'){
                            item.type = 'number';
                        }
                    });
                }else{
                    formState.config.rules.forEach((item:any) => {
                        item.type = 'array';
                    });
                }
            }

            // 判断默认值为空或null时的值更改为undefined;
            if(formState?.config?.defaultValue === null || formState?.config?.defaultValue === ''){
                formState.config.defaultValue = undefined;
            }

            Object.assign(activeData, {
                name: formState?.config?.label,
                _config_: formState?.config,
                _props_: formState?.componentProps,
                _other_: formState?.other,
            });

            console.log(activeData);

            debounce(() => emit('change', activeData), 300);
        };

        // 获取表单设置参数
        const getFormSetParame = () => {
            if(Object.keys(formState).length > 0){
                Object.keys(formState).forEach((key:string) => delete formState[key]);
            }
            const clone = deepClone(activeData) as Recordable;

            if(clone && Object.keys(clone).length > 0){
                if(clone?._config_?.component == 'Select'){
                    const options = clone?._props_?.options || [];
                    if(options && options.length > 0){
                        clone._props_.options = options.map((item:any) => {
                            if(!item?.optId){
                                item.optId = 'opt-'+Math.floor(Math.random() * 100000);
                            }
                            return item;
                        });
                    }
                }

                Object.assign(formState, {
                    config: clone?._config_,
                    componentProps: clone?._props_,
                    other: clone?._other_,
                });
            }
            // console.log('设置控件：', formState);
        };

        watch(() => props?.config, val => {
            if(Object.keys(activeData).length > 0){
                Object.keys(activeData).forEach((key:string) => delete activeData[key]);
            }
            if(val && Object.keys(val).length){
                Object.assign(activeData, val);
            }
            getFormSetParame();
        }, { immediate: true, deep: true });

        return {
            formState,
            compTypeOptions,
            marks,
            onHandleTypeChange,
            onHandleChange,
            getSvgURL,
            getCompIsShowList,
            isShwoComponent,

            onAddSelectOption,
            onSelectOptDragEnd,
            onDelSelectOption,
            onSelRuleChange,

            setCasOptRef,
            onSetCasOption,
            onUpdateCasOption,
            onCasRuleChange,
            onCasSearchChange,

            setTreeRef,
            onSetTreeSelect,
            onTreeRuleChange,
            onTreeMultipChange,
            onUpdateTreeData,

            onRadioRuleChange,
            onCheckboxRuleChange,
            onTimeFormatChange,
            onDateShowTimeChange,
            defaultRanges,
        };
    },
});
</script>

<style lang="less" scoped>
.sel-add-opt-wrapper {
    ul, li {
        list-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .opt_item {
        padding: 3px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        .draIcon {
            width: 10%;
            height: 32px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #d9d9d9;
            margin-right: 2px;
            cursor: move;
        }
    }
}

::v-deep(.ant-form-item){ margin-bottom: 14px; }
</style>